<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p><Back></Back>商品管理</p>
		</header>

		<!-- 添加商品按钮 -->
		<div class="add-food-button">
			<button @click="showAddFoodDialog = true">添加商品</button>
		</div>

		<!-- 商品列表 -->
		<div class="food-list">
			<div v-if="foodList.length === 0" class="empty-list">
				<p>暂无商品，请添加</p>
			</div>
			<ul v-else>
				<li v-for="(item, index) in foodList" :key="index" class="food-item">
					<div class="food-info">
						<div class="food-img">
							<img :src="item.foodImg" alt="商品图片">
						</div>
						<div class="food-detail">
							<h3>{{ item.foodName }}</h3>
							<p class="food-explain">{{ item.foodExplain }}</p>
							<p class="food-price">¥{{ item.foodPrice }}</p>
						</div>
					</div>
					<div class="food-actions">
						<button class="edit-btn" @click="editFood(item)">修改</button>
						<button class="delete-btn" @click="deleteFood(item)">删除</button>
					</div>
				</li>
			</ul>
		</div>

		<!-- 添加商品弹窗 -->
		<div class="dialog-overlay" v-if="showAddFoodDialog">
			<div class="dialog-container">
				<div class="dialog-header">
					<h3>添加商品</h3>
					<span @click="showAddFoodDialog = false" class="dialog-close">&times;</span>
				</div>
				<div class="dialog-content">
					<div class="form-item">
						<label>商品名称</label>
						<input type="text" v-model="newFood.foodName" placeholder="请输入商品名称">
					</div>
					<div class="form-item">
						<label>商品价格</label>
						<input type="number" v-model="newFood.foodPrice" placeholder="请输入商品价格">
					</div>
					<div class="form-item">
						<label>商品描述</label>
						<textarea v-model="newFood.foodExplain" placeholder="请输入商品描述"></textarea>
					</div>
				</div>
				<div class="dialog-footer">
					<button @click="addFood" class="dialog-btn">确认添加</button>
				</div>
			</div>
		</div>

		<!-- 编辑商品弹窗 -->
		<div class="dialog-overlay" v-if="showEditFoodDialog">
			<div class="dialog-container">
				<div class="dialog-header">
					<h3>编辑商品</h3>
					<span @click="showEditFoodDialog = false" class="dialog-close">&times;</span>
				</div>
				<div class="dialog-content">
					<div class="form-item">
						<label>商品名称</label>
						<input type="text" v-model="editingFood.foodName" placeholder="请输入商品名称">
					</div>
					<div class="form-item">
						<label>商品价格</label>
						<input type="number" v-model="editingFood.foodPrice" placeholder="请输入商品价格">
					</div>
					<div class="form-item">
						<label>商品描述</label>
						<textarea v-model="editingFood.foodExplain" placeholder="请输入商品描述"></textarea>
					</div>
				</div>
				<div class="dialog-footer">
					<button @click="updateFood" class="dialog-btn">确认修改</button>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import Back from '../components/Back.vue';
	
	export default {
		name: 'FoodManage',
		components: {
			Back
		},
		data() {
			return {
				business: null,
				foodList: [],
				showAddFoodDialog: false,
				showEditFoodDialog: false,
				newFood: {
					foodName: '',
					foodPrice: '',
					foodExplain: '新商品'
				},
				editingFood: {
					foodId: '',
					foodName: '',
					foodPrice: '',
					foodExplain: ''
				}
			}
		},
		created() {
			// 获取商家信息
			this.business = this.$getSessionStorage('business');
			if (!this.business) {
				alert('请先登录');
				this.$router.push({ path: '/businessLogin' });
				return;
			}
			
			// 获取商品列表
			this.loadFoodList();
		},
		methods: {
			// 加载商品列表
			loadFoodList() {
				let url = `FoodController/listFoodByBusinessId/${this.business.businessId}`;
				this.$axios.get(url).then(response => {
					if (response.data.code === 200) {
						this.foodList = response.data.result || [];
					} else {
						alert('获取商品列表失败');
					}
				}).catch(error => {
					console.error(error);
					alert('获取商品列表失败，请稍后重试');
				});
			},
			
			// 添加商品
			addFood() {
				if (!this.newFood.foodName) {
					alert('商品名称不能为空');
					return;
				}
				if (!this.newFood.foodPrice || this.newFood.foodPrice <= 0) {
					alert('请输入有效的商品价格');
					return;
				}
				
				let url = `FoodController/addFood/${this.newFood.foodName}/${this.newFood.foodPrice}/${this.business.businessId}`;
				this.$axios.post(url).then(response => {
					if (response.data.code === 200) {
						alert('添加成功');
						this.showAddFoodDialog = false;
						this.loadFoodList();
						// 清空表单
						this.newFood = {
							foodName: '',
							foodPrice: '',
							foodExplain: '新商品'
						};
					} else {
						alert('添加失败: ' + response.data.message);
					}
				}).catch(error => {
					console.error(error);
					alert('添加失败，请稍后重试');
				});
			},
			
			// 编辑商品
			editFood(food) {
				this.editingFood = JSON.parse(JSON.stringify(food));
				this.showEditFoodDialog = true;
			},
			
			// 更新商品
			updateFood() {
				if (!this.editingFood.foodName) {
					alert('商品名称不能为空');
					return;
				}
				if (!this.editingFood.foodPrice || this.editingFood.foodPrice <= 0) {
					alert('请输入有效的商品价格');
					return;
				}
				
				// 根据后端API定义修改请求参数
				// 使用RESTful风格传参，避免将整个图片数据放在URL中
				let url = `FoodController/updateFood/${this.editingFood.foodId}/${this.editingFood.foodName}/${this.editingFood.foodExplain}/${this.editingFood.foodPrice}`;
				this.$axios.post(url).then(response => {
					if (response.data.code === 200) {
						alert('修改成功');
						this.showEditFoodDialog = false;
						this.loadFoodList();
					} else {
						alert('修改失败: ' + response.data.message);
					}
				}).catch(error => {
					console.error(error);
					alert('修改失败，请稍后重试');
				});
			},
			
			// 删除商品
			deleteFood(food) {
				if (!confirm(`确定要删除商品"${food.foodName}"吗？`)) {
					return;
				}
    
				this.$axios.delete(`FoodController/deleteFood/${food.foodId}`)
					.then(response => {
						if (response.data.code === 200) {
							alert('删除成功');
							// 刷新商品列表，注意这里应该调用loadFoodList而不是getFoodList
							this.loadFoodList(); 
						} else {
							alert('删除失败: ' + response.data.message);
						}
					})
					.catch(error => {
						console.error('删除失败', error);
						// 尽管可能有错误，但仍然刷新一下列表，因为删除可能已经成功
						this.loadFoodList();
						alert('删除请求出错，请刷新页面查看最新状态');
					});
			}
		}
	}
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	/****************** 添加商品按钮 ******************/
	.add-food-button {
		margin-top: 14vw;
		padding: 3vw 4vw;
	}

	.add-food-button button {
		width: 100%;
		height: 10vw;
		background-color: #38CA73;
		color: #fff;
		border: none;
		border-radius: 4px;
		font-size: 4vw;
	}

	/****************** 商品列表 ******************/
	.food-list {
		padding: 2vw 4vw;
	}

	.empty-list {
		padding: 10vw 0;
		text-align: center;
		color: #999;
		font-size: 4vw;
	}

	.food-item {
		margin-bottom: 3vw;
		padding: 3vw;
		background-color: #fff;
		border-radius: 4px;
		box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	}

	.food-info {
		display: flex;
		margin-bottom: 2vw;
	}

	.food-img {
		width: 18vw;
		height: 18vw;
		margin-right: 3vw;
	}

	.food-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 4px;
	}

	.food-detail {
		flex: 1;
	}

	.food-detail h3 {
		font-size: 4vw;
		color: #333;
		margin: 0;
		margin-bottom: 1vw;
	}

	.food-explain {
		font-size: 3.5vw;
		color: #666;
		margin: 0;
		margin-bottom: 2vw;
	}

	.food-price {
		font-size: 4vw;
		color: #f60;
		margin: 0;
	}

	.food-actions {
		display: flex;
		justify-content: flex-end;
	}

	.food-actions button {
		padding: 1.5vw 3vw;
		margin-left: 2vw;
		border: none;
		border-radius: 3px;
		font-size: 3.5vw;
	}

	.edit-btn {
		background-color: #0097FF;
		color: #fff;
	}

	.delete-btn {
		background-color: #ff3b30;
		color: #fff;
	}

	/****************** 弹窗样式 ******************/
	.dialog-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.5);
		z-index: 2000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.dialog-container {
		width: 80%;
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;
	}

	.dialog-header {
		padding: 3vw 4vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #f0f0f0;
	}

	.dialog-header h3 {
		font-size: 4.5vw;
		color: #333;
		margin: 0;
	}

	.dialog-close {
		font-size: 6vw;
		color: #999;
		cursor: pointer;
	}

	.dialog-content {
		padding: 4vw;
	}

	.form-item {
		margin-bottom: 3vw;
	}

	.form-item label {
		display: block;
		margin-bottom: 2vw;
		font-size: 3.8vw;
		color: #333;
	}

	.form-item input,
	.form-item textarea {
		width: 100%;
		padding: 2.5vw;
		border: 1px solid #ddd;
		border-radius: 4px;
		font-size: 3.8vw;
		box-sizing: border-box;
	}

	.form-item textarea {
		height: 20vw;
		resize: none;
	}

	.dialog-footer {
		padding: 3vw 4vw;
		border-top: 1px solid #f0f0f0;
	}

	.dialog-btn {
		width: 100%;
		padding: 2.5vw;
		background-color: #0097FF;
		color: #fff;
		border: none;
		border-radius: 4px;
		font-size: 4vw;
	}
</style> 